<template>
  <div>
    <!-- 使用子组件 -->
    <!-- 传值到子组件 -->
    <home-header :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconsList="iconsList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
//引入子组件
import HomeHeader from "./components/Header.vue";
import HomeSwiper from "./components/Swiper.vue";
import HomeIcons from "./components/Icons.vue";
import HomeRecommend from "./components/Recommend.vue";
import HomeWeekend from "./components/Weekend.vue";

//引入工具
import axios from "axios";

export default {
  name: "Home",
  components: {
    //注册子组件
    HomeHeader: HomeHeader,
    HomeSwiper: HomeSwiper,
    HomeIcons: HomeIcons,
    HomeRecommend: HomeRecommend,
    HomeWeekend: HomeWeekend,
  },
  data: function () {
    return {
      city: "",
      swiperList: [],
      iconsList: [],
      recommendList: [],
      weekendList: [],
    };
  },
  methods: {
    getHomeInfo: function () {
      axios
        //配置文件位置：config/index.js
        //api 代理到 http//localhost:8080/static/mock/
        .get("/api/index.json")
        .then(this.getHomeInfoSuccess);
    },
    getHomeInfoSuccess: function (res) {
      if (res.data.ret && res.data.data) {
        var data = res.data.data;
        this.city = data.city;
        this.swiperList = data.swiperList;
        this.iconsList = data.iconsList;
        this.recommendList = data.recommendList;
        this.weekendList = data.weekendList;
      }
    },
  },
  //组件挂载时
  mounted: function () {
    this.getHomeInfo();
  },
};
</script>